import {
  Form,
  Select,
  Input,
  Button,
  Modal,
  Upload,
  Icon,
  message,
} from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/lib/form';
import { UploadProps } from 'antd/lib/upload';
import PublishApi from '../../manger/net-api';

const { Option } = Select;

export interface HomeFromProps extends FormComponentProps {
  visible: boolean;
  loadingStatus: boolean;
  onSubmit: () => void;
  onCancel: () => void;
  systemType: number;
  appType: number;
}

export class HomeFrom extends Component<HomeFromProps, any> {
  uploadBtn?: UploadProps = null;

  handleSelectChange = () => {};

  onCancel = () => {
    this.props.onCancel();
  };

  onSubmit = () => {
    this.props.onSubmit();
  };

  _renderSubmitBtn() {
    return (
      <Upload>
        <Button title={'提交'}>
          <Icon type="submit" />
          提交
        </Button>
      </Upload>
    );
  }

  uploadParams: UploadProps = {
    name: 'file',
    action: PublishApi.uploadFile,
    headers: {
      authorization: 'authorization-text',
    },
    data: () => {
      return { systemType: this.props.systemType, appType: this.props.appType };
    },
    defaultFileList: [],
    onChange(info) {
      if (info.file.status === 'done') {
        message.success(`file uploaded successfully`);
        // this.uploadBtn.
        // console.log(this.uploadBtn)
      } else if (info.file.status === 'error') {
        message.error(`file upload failed.`);
      }
    },
    multiple: false,
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Modal
        title="上传App包"
        confirmLoading={this.props.loadingStatus}
        onCancel={this.onCancel.bind(this)}
        onOk={this.onSubmit.bind(this)}
        okText={'确定'}
        visible={this.props.visible}
      >
        <Form labelCol={{ span: 3 }} wrapperCol={{ span: 12 }}>
          <Form.Item label="Build">
            {getFieldDecorator('build')(<Input type="textarea" />)}
          </Form.Item>

          <Form.Item label="版本号">
            {getFieldDecorator('version')(<Input type="textarea" />)}
          </Form.Item>

          <Form.Item label="描述">
            {getFieldDecorator('desc')(<Input type="textarea" />)}
          </Form.Item>

          <Form.Item label="文件">
            {getFieldDecorator('file')(
              <Upload ref={v => (this.uploadBtn = v)} {...this.uploadParams}>
                <Button>
                  <Icon type="upload" /> 上传文件
                </Button>
              </Upload>,
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

const HomeFromWrapper = Form.create<HomeFromProps>({ name: 'home-from' })(
  HomeFrom,
);
export default HomeFromWrapper;
